<template>
  <div>
    <div class="public-common">
        <div class="public-title" style="text-indent: 20px;;">固定资产列表</div>
        <div class="inline-btn">
          <label>设备编号：</label>
          <el-input v-model="searchdata.txtAssetNo"></el-input>
          <label>设备名称：</label>
          <el-input v-model="searchdata.txtAssetName"></el-input>
        </div>
        <div class="inline-btn">
          <label>设备领用人：</label>
          <el-input v-model="searchdata.txtUsedBy"></el-input>
          <el-button type="primary" @click="searchBtn">搜索</el-button>
          <el-button type="primary" @click="addBtn">新建</el-button>
          <el-button type="warning" @click="deleteBtn">删除</el-button>
        </div>
        <div class="" style="margin:2%;">
          <el-table :data="tableData" border width="100%" @selection-change="handleSelectionChange">
            <el-table-column type="index" width="50" label=" " fixed="left"></el-table-column>
            <el-table-column type="selection"  width="55"></el-table-column>
            <el-table-column prop="AssetNo"  label="设备编号" ></el-table-column>
            <el-table-column prop="AssetName"  label="设备名称" ></el-table-column>
            <el-table-column prop="AssetKind"  label="设备类型" ></el-table-column>
            <el-table-column prop="BuyDate"  label="设备购买日期" ></el-table-column>
            <el-table-column prop="OrgName"  label="设备所属部门" ></el-table-column>
            <el-table-column prop="UseDate"  label="设备领用日期" ></el-table-column>
            <el-table-column prop="UsedBy"  label="设备领用人" ></el-table-column>
            <el-table-column prop="AssetStatus"  label="设备状态" ></el-table-column>
            <el-table-column prop="Memo"  label="备注" ></el-table-column>
          </el-table>
          <el-pagination
            @size-change="handleSizeChange"  @current-change="handleCurrentChange"  :current-page="currentPage"
            :page-sizes="pagerange"  class="mt"  :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"  :total="totalnum"  ></el-pagination>
        </div>
    </div>
    <!--dialog-->
    <el-dialog title="固定资产登记" :visible.sync="dialogVisible">
      <span>
        <el-form ref="formData" :model="formData" width="50%" style="margin-left:2%;" :rules="formRule" label-width="120px">
          <el-form-item label="设备编号：" prop="txtAssetNo" >
            <el-input v-model="formData.txtAssetNo" maxlength="50"></el-input>
          </el-form-item>
          <el-form-item label="设备名称：">
            <el-input v-model="formData.txtAssetName"></el-input>
          </el-form-item>
          <!--TODO 写死还是需要查-->
          <el-form-item label="设备类型:" prop="txtAssetKind">
            <el-select v-model="formData.txtAssetKind" >
              <el-option v-for="(t,i) in assetsType" :label="t" :key="i" :value="i"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="设备购买日期：">
            <el-date-picker  clearable v-model="formData.txtBuyDate" format="yyyy-MM-dd" value-format="yyyy-MM-dd"></el-date-picker>
          </el-form-item>
          <el-form-item label="设备所属部门：" prop="txtBelongOrg">
            <el-select v-model="formData.txtBelongOrg" placeholder="请选择设备所属部门">
              <el-option v-for="(t,i) in dutyList" :label="t" :key="i" :value="i"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="领用日期：">
            <el-date-picker  clearable v-model="formData.txtUseDate" format="yyyy-MM-dd" value-format="yyyy-MM-dd"></el-date-picker>
          </el-form-item>
          <el-form-item label="设备领用人：" prop="txtUsedBy">
            <el-select v-model="formData.txtUsedBy" placeholder="请选择设备领用人">
              <el-option v-for="(t,i) in usedList" :label="t.name" :key="i" :value="t.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="设备状态：" prop="txtAssetStatus">
            <el-select v-model="formData.txtAssetStatus" placeholder="请选择设备状态">
              <el-option v-for="(t,i) in AssetStatus" :label="t" :key="i" :value="i"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="备注：">
            <el-input v-model="formData.txtMemo" type="textarea"></el-input>
          </el-form-item>
        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitData('formData',1)">应用</el-button>
        <el-button type="primary" @click="submitData('formData',2)">确 定</el-button>
        <el-button @click="cancelBtn('formData')">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {assets,getAllUsedList} from '@/ajax';
import config from './Manage.js';
export default {
    data(){
        return {
          searchdata:{
            txtAssetNo:'',txtAssetName:'',txtUsedBy:''
          },
          totalnum: 0,
          currentPage: 0,
          pagerange: [2, 10, 20, 50, 100],
          pagesize: 10,
          tableData:[],
          dialogVisible:false,
          formData:{txtAssetNo:'',txtAssetName:'',txtAssetKind:'',txtBuyDate:'',
                    txtBelongOrg:'',txtUseDate:'',txtUsedBy:'',txtAssetStatus:'',txtMemo:''},
          formRule:{
            txtAssetNo:{required:true,message:'请填写设备编号',trigger:'blur'},
            txtAssetKind:{required:true,message:'请选择设备类型',trigger:'blur'},
            txtBelongOrg:{required:true,message:'请选择设备所属部门',trigger:'blur'},
            txtUsedBy:{required:true,message:'请选择设备领用人',trigger:'blur'},
            txtAssetStatus:{required:true,message:'请选择设备状态',trigger:'blur'}
          },
          index:0,
          selection:[],
          config:config,
          dutyList:config.dutyList,
          assetsType:config.assetsType,
          AssetStatus:config.AssetStatus,
          usedList:[{'id':'123','name':'lily'}]
        }
    },
    mounted(){
      this.getFixedAssetsList();
      this.getAllUsedList();
    },
    inject:['reload'],
    methods:{
      searchBtn(){
        this.getFixedAssetsList();
      },
      //
      handleSelectionChange(val){
        if(val){
          this.selection = [];
          for (let i in val) {
            this.selection.push(val[i]['AssetNo'])
          }
        }
      },
      getFixedAssetsList(){
        this.searchdata['page'] = this.pagesize;
        this.searchdata['rows'] = this.currentPage;
        /* this.tableData =config.assetsList;
        this.totalnum = this.tableData.length; */
        assets.getFixedAssetsList(this.searchdata).then((res) => {
          if (res.data.code == '00000') {
            if(res.data.data.length > 0){
              this.tableData = res.data.data;
              this.totalnum = this.tableData.length;
            }else{
              this.tableData = [];
              this.totalnum = 0;
            }
          } else {
            this.$message(res.data.message);
          }
          }).catch(()=>{
            this.$message('服务器正忙，获取固定资产列表失败');
          })
      },
      //获取所有的领用人
      getAllUsedList(){
        getAllUsedList().then((res) => {
          if (res.data.code == '00000') {
            if(res.data.data.length > 0){
              this.usedList = res.data.data;
            }
          } else {
            this.usedList = []
          }
        })
      },
      //分页
      handleSizeChange(val){
          this.pagesize = val;
          this.getFixedAssetsList();
      },
      handleCurrentChange(val){
          this.currentPage = val;
          this.getFixedAssetsList();
      },
      addBtn(){
        this.dialogVisible = true;
      },
      cancelBtn(form){
        this.$refs[form].clearValidate();
        this.dialogVisible=false;
      },
      deleteBtn(){
        console.log('sssss',this.selection)
        if(this.selection.length <= 0){
          this.$message('请选择要操作的数据')
        }else{
           assets.deleteFixedAssets({assetNo:JSON.stringify(this.selection)}).then((res) => {
              if (res.data.code == '00000') {
                this.reload()
              } else {
                this.$message(res.data.message);
              }
            }).catch(()=>{
              this.$message('服务器正忙，删除失败');
            })
        }
      },
      //进行添加（通过type区分应用确定，应用1确定2）
      submitData(form,type){
        this.$refs[form].validate((valid) => {
          if(valid){
            assets.addFixedAssets(this.formData).then((res) => {
                if (res.data.code == '00000') {
                  if(type == 1){
                    this.formData = {txtAssetNo:'',txtAssetName:'',txtAssetKind:'',txtBuyDate:'',
                          txtBelongOrg:'',txtUseDate:'',txtUsedBy:'',txtAssetStatus:'',txtMemo:''};
                  }else{
                    this.reload()
                  }
                } else {
                  this.$message(res.data.message);
                }
              }).catch(()=>{
                this.$message('服务器正忙，操作失败');
            })
          }else{
            return false
          }
        })
      }
    },
    watch:{

    }
}
</script>
<style lang="scss">
.public-common{
    .public-title{line-height: 30px;background-color: #deecfd;}
    .inline-btn{display: inline-flex;margin: 20px;
      label{width:100px;line-height: 32px;margin-left:10px;text-align: right;}
      .el-input{width: 170px;}
      .el-button{margin-left:10px;}
    }
    .el-form-item .el-input,.el-select,.el-date-picker{width: 200px !important;}
    .left{display: inline-block;;width:64%;float: left;}
    .right{display: inline-block;;width:35%;float: left;}
    .el-form .inline-btn{margin:unset;}
    .footer{
      width: 100%;
      display: inline-flex;
      margin-left: 72%;
    }
}
</style>
